<template>
  <el-dialog
    v-if="open"
    class="dia-style"
    :title="title"
    :visible.sync="open"
    width="1000px"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form
      ref="form"
      :model="formData"
      label-width="140px"
      label-position="left"
      style="padding: 0 10px"
      @submit.native.prevent
    >
      <!-- 基础信息部分 -->
      <div class="upload-title-box">
        <div class="upload-title">基础信息</div>
        <el-checkbox v-model="showRequired" @change="changeShow">仅展示必填信息</el-checkbox>
      </div>
      <HkForm
        ref="hkFormRef1"
        :form-labels="basicArr"
        :rules="formRules"
        :data="formData"
        :dict-list="dictList"
        :btn-hidden="true"
        label-width="140"
        label-position="left"
      >
        <template #filter-equipmentOrgId>
          <treeselect
            v-model="formData.equipmentOrgId"
            :options="dictList.orgList"
            :normalizer="normalizer"
            style="width: 100%"
            :append-to-body="true"
            placeholder="请选择责任部门"
            @select="changeOrg"
            noResultsText="无匹配数据" 
          />
        </template>

        <template #filter-equipmentSecLevel>
          <el-select
            v-model="formData.equipmentSecLevel"
            filterable
            placeholder="请选择涉密等级"
            style="width: 100%"
            @change="clearEquipmentProtection"
          >
            <el-option
              v-for="item in dictList.equipmentSecLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>

        <template #filter-equipmentProtection>
          <el-select v-model="formData.equipmentProtection" filterable placeholder="请选择防护等级" style="width: 100%">
            <el-option
              v-for="item in dictList.equipmentProtectionList"
              v-if="formData.equipmentSecLevel == 3 && item.value == 3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
            <el-option
              v-for="item in dictList.equipmentProtectionList"
              v-if="formData.equipmentSecLevel == 4 && item.value == 2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
            <el-option
              v-for="item in dictList.equipmentProtectionList"
              v-if="formData.equipmentSecLevel == 5 && item.value == 1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
            <el-option
              v-for="item in dictList.equipmentProtectionList"
              v-if="formData.equipmentSecLevel == 2 && item.value > 3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
            <el-option
              v-for="item in dictList.equipmentProtectionList"
              v-if="formData.equipmentSecLevel == 1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </HkForm>

      <!-- 增加表格 -->
      <div v-if="!showRequired">
        <!--<div class="upload-title-box">
          <div class="upload-title">安全域划分情况</div>
        </div>
        <el-form-item>
          <AddTable :tableData="formData.securityList" :tableList="securityListTable" ref="add_table" ></AddTable>
        </el-form-item>-->
        <div class="upload-title-box">
          <div class="upload-title">外单位互联情况</div>
        </div>
        <AddTable ref="add_table" :table-data="formData.unitsList" :table-list="unitsListTable" />
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import { addDatas, editDatas, queryById, queryUserList } from '@/api/assets/network.js'
import AddTable from '@/components/Common/addTable.vue'
import Treeselect from '@riophae/vue-treeselect'
import { validateIP } from '@/utils/validate'

export default {
  components: { HkForm, AddTable, Treeselect },
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    dictList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 对话框是否显示
      open: false,
      // 仅展示必填信息
      showRequired: true,
      // 折叠菜单展示的数据
      activeNames: [],
      // 表单数据
      formData: {},
      defaultFormData: {
        // 安全域划分情况
        securityList: [],
        // 外单位互联情况
        unitsList: [],
        equipmentSecLevel: '',
        equipmentProtection: ''
      },
      // 人员信息
      userListData: [],
      // 基础信息
      basicArr: [
        {
          label: '网络名称',
          field: 'name',
          type: 'input',
          maxlength: 50
        },
        {
          label: '所属单位',
          field: 'equipmentOrgId',
          type: 'slot'
        },
        {
          label: '用户描述',
          field: 'describes',
          type: 'textarea',
          hidden: false,
          maxlength: 250,
          span: 24
        },
        {
          label: '网络类型',
          field: 'equipmentType',
          type: 'select',
          list: 'networkTypeList'
        },
        {
          label: '涉密等级',
          field: 'equipmentSecLevel',
          type: 'slot',
          list: 'equipmentSecLevelList'
        },
        {
          label: '防护等级',
          field: 'equipmentProtection',
          type: 'slot',
          list: 'equipmentProtectionList'
        },
        {
          label: '测评状态',
          field: 'evaluationStatus',
          type: 'select',
          list: 'evaluationStatusList'
        },
        {
          label: '测评时间',
          field: 'evaluationDate',
          type: 'datePicker',
          hidden: false,
          format: 'yyyy-MM-dd'
        },
        {
          label: 'IP',
          field: 'equipmentIp',
          type: 'input',
          hidden: false,
          maxlength: 50
        },
        {
          label: '运维负责人',
          field: 'maintenancePerson',
          hidden: false,
          type: 'input',
          maxlength: 50
        },
        {
          label: '联系电话',
          field: 'maintenanceModel',
          hidden: false,
          type: 'input',
          maxlength: 50
        },
        {
          label: '排序',
          field: 'sort',
          type: 'number',
          hidden: false
        },
        {
          label: '备注',
          field: 'equipmentRemark',
          type: 'textarea',
          hidden: false,
          maxlength: 250,
          span: 24
        }
      ],

      // 表单校验
      formRules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        equipmentOrgId: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentType: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentSecLevel: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentProtection: [{ required: true, message: '不能为空', trigger: 'change' }],
        evaluationStatus: [{ required: true, message: '不能为空', trigger: 'change' }],

        equipmentIp: [{ validator: validateIP, trigger: 'blur' }]
      },

      securityListTable: [
        { label: '编号', param: 'equipmentNo', type: 'input', hidden: true, maxlength: 50 },
        { label: '名称', param: 'name', type: 'input', hidden: true, maxlength: 50 },
        { label: '访问控制策略', param: 'equipmentStrategy', type: 'input', hidden: true, maxlength: 50 }
      ],
      unitsListTable: [
        { label: '互联单位名称', param: 'name', type: 'input', hidden: true, maxlength: 50 },
        { label: '互联时间', param: 'interTime', type: 'datePicker', format: 'yyyy-MM-dd', hidden: true },
        { label: '通联描述', param: 'describes', type: 'textarea', hidden: true, maxlength: 50 }
      ]
    }
  },
  computed: {},
  watch: {},

  mounted() {},
  methods: {
    // 改变涉密等级
    clearEquipmentProtection() {
      this.formData.equipmentProtection ? (this.formData.equipmentProtection = '') : null
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 是否只展示必填项
    changeShow() {
      this.basicArr.forEach((item) => {
        if (typeof item.hidden === 'boolean') {
          item.hidden = this.showRequired
        }
      })
    },
    // 清空表单
    resetFields() {
      this.$refs['form'].resetFields()
      this.$refs['hkFormRef1']?.resetForm('formLabels')
      this.$refs['hkFormRef']?.resetForm('formLabels')
      this.formData = {}
    },
    show(id) {
      this.showRequired = true
      this.changeShow()
      return new Promise((resolve, reject) => {
        if (id) {
          queryById(id).then((res) => {
            this.formData = res
          })
        } else {
          this.formData = JSON.parse(JSON.stringify(this.defaultFormData))
        }
        resolve(this.formData)
      }).then((res) => {
        this.open = true
      })
    },
    // 提交事件
    async submitForm() {
      const res = await this.$refs.hkFormRef1.handleFormSubmit('formLabels')
      if (this.title == '添加') {
        addDatas(this.formData).then((res) => {
          this.$message.success('新增成功')
          this.cancel()
          this.$emit('handleAdd')
        })
      } else {
        editDatas(this.formData).then((res) => {
          this.$message.success('修改成功')
          this.cancel()
          this.$emit('handleAdd')
        })
      }
    },
    // 关闭按钮
    cancel() {
      this.formData = {}
      this.open = false
    },
    // 部门change事件
    changeOrg(node) {
      if (this.formData.equipmentUserId) {
        this.formData.equipmentUserId = ''
      }
      this.getUserList(node.id)
    },
    /** 查询列表 */
    getUserList(id) {
      queryUserList(id).then((res) => {
        this.userListData = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-title-box {
  height: 60px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 8%);
  .upload-title {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
  }
}
::v-deep {
  .el-collapse-item {
    border-bottom: 1px solid #e6ebf5;
    .el-collapse-item__wrap {
      border-bottom: none;
    }
    .el-collapse-item__content {
      padding-bottom: 0px;
    }
  }
  .iRow {
    margin: 0 !important ;
  }
  .el-dialog__body {
    display: flex;
    flex-direction: column;
  }
  .el-collapse {
    border-top: none;
    .el-collapse-item__header {
      height: 60px;
      font-size: 16px;
      font-weight: 700;
      color: #000000;
      margin-left: 30px;
      border-bottom: none;
    }
    .el-collapse-item__arrow {
      margin: 0 auto 0 10px;
      margin-left: -90px;
    }

    .el-collapse-item__content {
      .el-row {
        width: 100%;
      }
    }
  }
}
</style>
